table cell设置text-overflow ellipsis

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

table cell在不固定width或设置table-layout: fixed的情况下，如何让text-overflow: ellipsis生效。

ellipsis元素相对于td绝对定位

1
2
3
4
5
6
<tr>
    <td class="ellipsis-column">
        <div class="ellipsis">...</div>
        <!--<span class="ellipsis">...</span>-->
    </td>
</tr>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.ellipsis-column {
  position: relative;
  width: 50%;
}

.ellipsis {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  transform: translateY(-50%);
  
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}